<template>
	<view class="comp-equip-pop" v-if="pop_data" :style="{left:pop_data.x + (body ? pop_data.width + 220 : pop_data.width + 11) +'px',top:pop_data.y - 1 +'px'}">
		<view :class="['name',`qlty-${equipDataVolume.qlty}`]">
			<view>{{equipDataVolume.name}}</view>
			<view v-if="body" class="tag">已装备</view>
		</view>
		<view class="attr-warp">
			<view class="hr"></view>
			<view class="info">
				<view :class="['item-face',`qlty-${equipDataVolume.qlty}`]">
					<image class="ico" :src="`../../static/items/${equipDataVolume.resid}.png`" mode=""></image>
				</view>
				<view class="item-info">
					<view class="row">
						<view class="label">阶数：</view><view class="value">{{equipDataVolume.lv}}</view>
					</view>
					<view class="row">
						<view class="label">耐久：</view><view class="value">{{equipDataVolume.recast_count}}/{{equipDataVolume.max_recast_count}}</view>
					</view>
					<view class="row" style="color:var(--color-green)">
						<view class="label">战力：</view><view class="value">{{$formula.equip_power(equipDataVolume)}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 基础属性 -->
		<view class="attr-warp">
			<view class="hr"></view>
			<view class="attr">
				<!-- <view class="hd">[基础属性]</view> -->
				<view class="bd">
					<view :class="['item']" v-if="equipDataVolume.hp != 0">血量：{{equipDataVolume.hp}}</view>
					<view :class="['item']" v-if="equipDataVolume.min_ac != 0 || equipDataVolume.max_ac != 0">物攻：{{equipDataVolume.min_ac}}-{{equipDataVolume.max_ac}}</view>
					<view :class="['item']" v-if="equipDataVolume.min_def != 0 || equipDataVolume.max_def != 0">物防：{{equipDataVolume.min_def}}-{{equipDataVolume.max_def}}</view>
				</view>
			</view>
		</view>
		
		<!-- 附加属性 -->
		<view class="attr-warp" v-if="
			equipDataVolume.spd != 0 || 
			equipDataVolume.fix_ac != 0 || 
			equipDataVolume.fix_def != 0"
		>
			<view class="hr"></view>
			<view class="attr">
				<!-- <view class="hd" style="color:var(--color-yellow)">[附加属性]</view> -->
				<view class="bd">
					<view style="color:var(--color-yellow)" :class="['item']" v-if="equipDataVolume.spd != 0">攻速：{{equipDataVolume.spd}}</view>
					<view style="color:var(--color-yellow)" :class="['item']" v-if="equipDataVolume.fix_ac != 0">固伤：{{equipDataVolume.fix_ac}}</view>
					<view style="color:var(--color-yellow)" :class="['item']" v-if="equipDataVolume.fix_def != 0">固防：{{equipDataVolume.fix_def}}</view>
				</view>
			</view>
		</view>
		
		<!-- 特殊属性 -->
		<view class="attr-warp" v-if="
			equipDataVolume.exp_percent != 0 || 
			equipDataVolume.coin_percent != 0 || 
			equipDataVolume.crit != 0 || 
			equipDataVolume.suck_blood != 0 || 
			equipDataVolume.crit_percent != 0"
		>
			<view class="hr"></view>
			<view class="attr">
				<!-- <view class="hd" style="color:var(--color-purple)">[特殊属性]</view> -->
				<view class="bd">
					<view style="color:var(--color-purple)" :class="['item']" v-if="equipDataVolume.exp_percent != 0">经验加成：{{equipDataVolume.exp_percent}}%</view>
					<view style="color:var(--color-purple)" :class="['item']" v-if="equipDataVolume.coin_percent != 0">金币加成：{{equipDataVolume.coin_percent}}%</view>
					<view style="color:var(--color-purple)" :class="['item']" v-if="equipDataVolume.suck_blood != 0">吸血：{{equipDataVolume.suck_blood}}%</view>
					<view style="color:var(--color-purple)" :class="['item']" v-if="equipDataVolume.crit != 0">暴击：{{equipDataVolume.crit}}%</view>
					<view style="color:var(--color-purple)" :class="['item']" v-if="equipDataVolume.crit_percent != 0">暴伤：{{equipDataVolume.crit_percent}}%</view>
				</view>
			</view>
		</view>
		
		
		<block v-if="equipDataVolume.describe">
			<view class="attr-warp">
				<view class="hr"></view>
				<view class="describe">{{equipDataVolume.describe}}</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import { mapState} from "vuex";
	export default {
		name:"comp-equip-pop",
		props : ['body'],
		data() {
			return {
				pop_data : ''
			};
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			},
			equipDataVolume(){
				return this.pop_data.equipDataVolume
			}
		},
		created() {
			
		},
		mounted() {
			uni.$on('equip_pop',(pop_data) => {

				this.pop_data = JSON.parse(JSON.stringify(pop_data));
				
				if(this.body && this.pop_data){
					
					let bodyEquipDataVolume = this.player.equip.find(item => item.region == this.pop_data.equipDataVolume.region);
					
					if(bodyEquipDataVolume && this.pop_data.comparison){
						this.pop_data['equipDataVolume'] = bodyEquipDataVolume
					}else{
						this.pop_data = ''
					}
				}

				if(this.pop_data){

					this.$nextTick(() => {

						const query = uni.createSelectorQuery().in(this);
						query.select('.comp-equip-pop').boundingClientRect(data => {

							if(this.pop_data.y + data.height > uni.getSystemInfoSync().windowHeight){
								this.pop_data.y =  this.pop_data.y - (this.pop_data.y + data.height - uni.getSystemInfoSync().windowHeight)
							}
								
						}).exec();
					})
				}
				
				
				
			})
		},
	}
</script>

<style lang="scss">
	.comp-equip-pop{
		min-width: 200px;
		border: 1px solid #000;
		background-color: #21252b;
		flex-shrink: 0;
		padding:10px 10px 0 10px;
		display: inline-flex;
		border-radius: 4px;
		flex-direction: column;
		position: absolute;
		z-index: 99999901;
		.name{
			margin-bottom:10px;
			width:100%;
			display: flex;
			justify-content: center;
			font-size:16px;
			font-weight: bold;
			@include qlty-color;
			position: relative;
			.tag{
				color:var(--color-green);
				font-size:12px;
				position: absolute;
				right:0;
				bottom:0px;
			}
		}
		
		.info{
			display: flex;
			.item-face{
				
				background-color: #282c35;
				width:50px;
				height:50px;
				border: 1px solid #000;
				border-radius: 4px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				@include qlty-bg-color;
				.ico{
					width:48px;
					height:48px;
				}
			}
			.item-info{
				margin-left:10px;
				font-size:12px;
				display: flex;
				flex-direction: column;
				position: relative;
				justify-content: space-between;
				.row{
					display: flex;
					
				}
			}
		}
		
		.attr-warp{
			padding-bottom:10px;
			.hr{
				margin-bottom:10px;
			}
			.attr{
				.hd{
					margin-bottom:5px;
					color:#26e2ea
				}
				.bd{
					display: flex;
					flex-direction: column;
					gap:4px
				}
			}
		}
	}
</style>